<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="message"> {{reverse}}<br>
			
			<input type="text" v-model="firstName">
			<input type="text" v-model="lastName">
			{{fullName2}}<br>
			
		</div>
		
		
		
		
		
		
		<script src="js/vue.js" ></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					message: "lxk",
					firstName: 'l',
					lastName: 'xk',
				},
				
				// 计算属性是基于它们的依赖进行缓存的
				// 计算属性只有在它的相关依赖发生改变时才会重新求值
				// 只要 message 还没有发生改变，多次访问 reversedMessage，计算属性会立即返回之前的计算结果，而不再次执行函数
				computed: {
					reverse: function(){
						return this.message.split('').reverse().join('');
					},
					// 默认是fullName的getter方法
					fullName: function(){
						return this.firstName + this.lastName;
					},
					
					// 计算属性默认只有 getter，在需要时你也可以提供一个 setter
					// 可设置  vm.fullName2 = "L XK"; 来设置
					fullName2: {
						get: function(){
							return this.firstName + this.lastName;
						},
						set: function(newValue){
							var names = newValue.split(' ');
							this.firstName = names[0];
							this.lastName = names[1];
						}
					}
				}
				
			});
			
			
		</script>
	</body>
</html>
